<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <!-- <div class="box-top">
      <div class="headPhoto">
        <img src="@/assets/img/emptyRecord.png">
      </div>
      <div class="titleInfo">
        <div class="name">{{ model.companyName }}</div>
        <div>{{ model.companyNo }}</div>
      </div>
    </div> -->
    <div class="box-bottom">
      <simpleInfoCard title="基本信息">
        <template slot="contents">
          <div class="contents">
            <el-row>
              <el-col :span="24" class="col">
                <div class="label">唯一编码:</div>
                <div class="value">{{ model.onlyCode }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">登录账号:</div>
                <div class="value">{{ model.loginNum }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">登录密码:</div>
                <div class="value">{{ model.loginPwd }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">到期时间:</div>
                <div class="value">{{ model.expireTime }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">是否禁用:</div>
                <div class="value">{{ model.isDisable === '1' ? '禁用' : '正常' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">联系方式:</div>
                <div class="value">{{ model.contact }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">创建时间:</div>
                <div class="value">{{ model.createTime }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">公告:</div>
                <div class="value">{{ model.notice }}</div>
              </el-col>
              <el-col :span="24" class="col">
                <div class="label">备注:</div>
                <div class="value">{{ model.remarks }}</div>
              </el-col>
            </el-row>
          </div>
        </template>
      </simpleInfoCard>
    </div>
  </el-drawer>
</template>

<script>
import simpleInfoCard from '@/components/xm/simpleInfoCard'

export default {
  components: {
    simpleInfoCard
  },
  props: {},
  data() {
    return {
      model: {},
      defaultFormat: '--',
      title: '',
      size: '50%',
      visible: false,
      url: {
        detail: '/old/oldFacility/getByNo'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(rowData) {
      console.log('show', rowData)
      this.visible = true
      this.model = { ...rowData }
      // const that = this
      // this.$store.dispatch('app/setLoading', true)
      // api_getProvideFacilityDeatil({ companyNo: rowData.companyNo }).then((res) => {
      //   if (res.status === 0) {
      //     that.model = { ...formattingObjAttr(res.data) }
      //   } else {
      //     that.$message.warning(res.data || '操作失败！')
      //   }
      // }).finally(() => {
      //   that.$store.dispatch('app/setLoading', false)
      // })
    },
    modelClose() {
      this.visible = false
    },
    // 营业期限
    getDoBusinessDeadline(obj) {
      return this.$moment(obj.businessBeginTime).format('YYYY-MM-DD') + ' ~ ' + this.$moment(obj.businessEndTime).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="scss" scoped>
// 内容超长启用滚动条
::v-deep .el-drawer__body {
  overflow: auto;
  padding: 24px;
  .box-top{
    display: flex;
    justify-content: flex-start;
    padding: 0 0 10px;
    border-bottom: 1px #dcdfe6 solid;
    .headPhoto{
      width: 75px;
      height: 75px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .titleInfo{
      margin: 0 20px;
      color: #333;
      .name{
        font-weight: 700;
        font-size: 20px;
        padding: 10px 0 20px;
      }
    }
  }
  .box-bottom{
    // margin-top: 16px;
    .contents{
      .col{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 16px;
        .label{
          color: #666;
          min-width: 100px;
          text-align: right;
        }
        .value{
          margin-left: 5px;
          color: #333;
          .gradeTag{
            padding: 0 18px;
            background-color: #fff8e6;
            color: #ffb800;
            border-color: #ffb800;
          }
        }
        .lable-ItemTable{
          margin-bottom: 16px;
        }
        .box-ServiceItemTable{
          width: 90%;
        }
      }
    }
  }
}
</style>
